import React from "react"
import "./colorPiker.css"

export default class ColorPiker extends React.Component {
    state = {
        r: 0,
        g: 0,
        b: 0
    }
    render() {
        let { r, g, b } = this.state;
        return <div className="wrap">
            <div className="context" style={{ backgroundColor: `rgb(${r},${g},${b})` }}></div>
            <div className="inputw">
                R: <input type="range" mix="0" max="255" value={r} name="r" onChange={this.change} ></input><br></br>
                G: <input type="range" mix="0" max="255" value={g} name="g" onChange={this.change}></input><br></br>
                A: <input type="range" mix="0" max="255" value={b} name="b" onChange={this.change}></input><br></br>
            </div>
        </div>

    }
    change = (e) => {
        let key = e.target.name;
        this.setState({
            [key]: e.target.value
        })
    }
}